<template>
  <div>
    <div style="margin: 30px 0">
      <a-input-search placeholder="查询" style="width: 200px;margin-right: 10px" enter-button @search="onSearch" />
      <a-button type="primary" icon="edit" @click="newlyBuild">新建</a-button>
    </div>
    <!--  父级 table  -->
    <a-table
        :columns="columns"
        :data-source="data"
        class="components-table-demo-nested"
    >
      <!--  视频自定义样式  -->
      <div slot="videoes" slot-scope="videoes">
        <video
            width="200"
            height="140"
            controls="controls"
            :preload="true"
            style="width: 190px;"
        >
          <source
              :src="videoes"
              type="video/ogg"
          />
          <source
              :src="videoes"
              type="video/mp4"
          />
          <source
              :src="videoes"
              type="video/webm"
          />
          <!--      <object data="/i/movie.mp4" width="320" height="240">-->
          <!--        <embed width="320" height="240" src="/i/movie.swf" />-->
          <!--      </object>-->
        </video>
      </div>
      <!--  720视图自定义样式  -->
      <div slot="imgUrl" slot-scope="imgUrl">
        <img
            @click="previewImg(imgUrl)"
            :src="imgUrl"
            alt=""
            style="width: 190px;height: 100px;cursor:pointer"
        />
        <PictureDisplay ref="picture" />
      </div>
      <!--  语音自定义样式  -->
      <div slot="speech" slot-scope="speech">
        <audio controls="controls">
          <source :src="speech" type="audio/ogg">
          <source :src="speech" type="audio/mpeg">
        </audio>
      </div>

      <!--  状态自定义样式    -->
      <div slot="type" slot-scope="type">
        <a-switch
            checked-children="已应用"
            un-checked-children="未应用"
            :default-checked="true"
            @change="changeType(type)"
        />
      </div>
      <!--  操作自定义样式  -->
      <div slot="operation" slot-scope="operation">
        <a-button type="primary" @click="edit(operation)">编辑</a-button>
        <a-popconfirm
            title="确定要删除吗？"
            ok-text="是的"
            cancel-text="不了"
            @confirm="confirm(operation)"
        >
          <a-button type="danger" style="margin-left: 10px">删除</a-button>
        </a-popconfirm>
      </div>
      <!--  子级 table    -->
      <a-table
          slot="expandedRowRender"
          :columns="innerColumns"
          :data-source="innerData"
          :pagination="false"
      >
        <div slot="hotspotImg" slot-scope="hotspotImg">
          <img
              :src="hotspotImg"
              alt=""
              style="width: 190px;height: 100px"
          />
        </div>
        <!--  语音自定义样式  -->
        <div slot="hotspotVoice" slot-scope="hotspotVoice">
          <audio controls="controls">
            <source :src="hotspotVoice" type="audio/ogg">
            <source :src="hotspotVoice" type="audio/mpeg">
          </audio>
        </div>
      </a-table>
    </a-table>
    <!--  添加修改的组件    -->
    <SceneAdd
      v-if="addModalVisible"
      :titles="titles"
      :modalVisible="addModalVisible"
      v-on:changeVisible="changeVisible"
      v-on:submitOk="submitOk"
      :linetable="linetable"
    />
  </div>
</template>

<script>
//  引入添加的组件
import SceneAdd from './components/SceneAdd';
//  引入浏览图片组件
import PictureDisplay from './components/PictureDisplay';
//  引入请求
import { uploadVideo } from '@/services/photoList'

const columns = [
  {
    title: '序号',
    dataIndex: 'id',
    key: 'id',
    align: 'center',
    width: 80
  },
  {
    title: '问题',
    dataIndex: 'problem',
    key: 'problem',
    align: 'center',
    ellipsis: true,
    width: 130
  },
  {
    title: '视频',
    dataIndex: 'videoes',
    key: 'videoes',
    align: 'center',
    scopedSlots: { customRender: 'videoes' }
  },
  {
    title: '视图',
    dataIndex: 'imgUrl',
    key: 'imgUrl',
    align: 'center',
    scopedSlots: { customRender: 'imgUrl' }
  },
  {
    title: '语音',
    dataIndex: 'speech',
    key: 'speech',
    align: 'center',
    width: 345,
    scopedSlots: {customRender: 'speech'}
  },
  {
    title: '关键词',
    dataIndex: 'keyWord',
    key: 'keyWord',
    align: 'center',
    ellipsis: true,
    width: 150
  },
  {
    title: '解答',
    dataIndex: 'answer',
    key: 'answer',
    align: 'center',
    ellipsis: true,
    width: 130
  },
  {
    title: '状态',
    dataIndex: 'type',
    key: 'type',
    align: 'center',
    width: 100,
    scopedSlots: { customRender: 'type' }
  },
  {
    title: '操作',
    key: 'operation',
    align: 'center',
    width: 190,
    scopedSlots: { customRender: 'operation' }
  },
];

const data = [];
for (let i = 1; i < 5; ++i) {
  data.push({
    id: i,
    key: i,
    //  选择状态

    //  问题
    problem: '这辆车的排量如何',
    //  视频
    videoes: 'http://st.chaoyindj.com//zwmtv2016/%E5%A4%9C%E5%BA%97-Dj%E9%98%BF%E5%B8%86-%E5%AE%8B%E5%86%AC%E9%87%8E%20-%20%E8%91%A3%E5%B0%8F%E5%A7%90.mp4',
    //  语音
    speech: 'https://www.ytmp3.cn/down/75935.mp3',
    //  关键词
    keyWord: ['排量','房车','价格','耗油'],
    //  解答
    answer: '这辆车的排量是8.0的',
    //  规则
    rulee: '登我QQ我等我第三方打算',
    //  720视图
    imgUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ede95ae9609da801219b7fa04cce.jpg%401280w_1l_2o_100sh.jpg&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643250148&t=657c0c74194ff6fce76ea3444732f4e6',
    //  状态
    type: 1
  });
}

const innerColumns = [
  {
    title: '热点名称',
    dataIndex: 'hotspotName',
    key: 'hotspotName',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '热点图片',
    dataIndex: 'hotspotImg',
    key: 'hotspotImg',
    align: 'center',
    scopedSlots: { customRender: 'hotspotImg' }
  },
  {
    title: '热点语音',
    dataIndex: 'hotspotVoice',
    key: 'hotspotVoice',
    align: 'center',
    width: 345,
    scopedSlots: { customRender: 'hotspotVoice' }
  },
  {
    title: '热点问题',
    key: 'hotspotIssues',
    dataIndex: 'hotspotIssues',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '热点关键词',
    key: 'hotspotKeyword',
    dataIndex: 'hotspotKeyword',
    ellipsis: true,
    align: 'center',
  },
  {
    title: '热点解答',
    dataIndex: 'hotspotAnswers',
    key: 'hotspotAnswers',
    ellipsis: true,
    align: 'center',
  },
];

const innerData = [];
for (let i = 0; i < 3; ++i) {
  innerData.push({
    hotspotId: i,
    key: i,
    hotspotName: '电视' + i,
    hotspotIssues: '此车开的人多吗？',
    hotspotImg: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimage.suning.cn%2Fuimg%2FZR%2Fshare_order%2F159275411224370318.jpg&refer=http%3A%2F%2Fimage.suning.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1642658005&t=45a2ae0cd58b867df2c81a384074195e',
    hotspotVoice: 'https://www.ytmp3.cn/down/75935.mp3',
    hotspotKeyword: ['排量，','房车，','价格，','耗油'],
    hotspotAnswers: '此车类型目前来说还是受到广大群众喜爱',
  });
}

export default {
  name: 'SceneList',
  components: {
    SceneAdd,PictureDisplay
  },
  data() {
    return {
      //  父列表的数据定义
      data,
      //  父列表的数据格式
      columns,
      //  嵌套子列表的数据定义
      innerColumns,
      //  嵌套子列表的数据格式
      innerData,
      //  模态框
      addModalVisible: false,
      //  新建和编辑的的标题
      titles: '',
      //  编辑时prop传入的数据
      linetable: {}
    };
  },
  mounted() {
    uploadVideo().then(res=>{
      console.log(res.data)
    })
  },
  methods: {
    //  搜索
    onSearch(value) {
      console.log(value);
    },
    //模态框展示
    changeVisible (value) {
      this.addModalVisible = value;
    },
    submitOk(value) {
      this.addModalVisible = value;
    },
    //  添加
    newlyBuild() {
      this.addModalVisible = !this.addModalVisible;
      this.titles = '添加场景'
      this.linetable = this.data
    },
    //  编辑
    edit(e) {
      console.log(e)
      this.addModalVisible = !this.addModalVisible;
      this.titles = '修改场景'
      this.linetable = e
    },
    //  删除事件
    confirm(e){
      console.log(e);
      this.$message.success('删除成功');
    },
    //  更改状态
    changeType(e) {
      e ? this.$message.success('已应用')
          : this.$message.error('未应用')
      console.log(this.data)
      console.log(this.innerData)
    },
    //  浏览图片
    previewImg(item) {
      console.log(item)
      this.$refs.picture.show(item)
    }
  },
};
</script>

<style scoped>

</style>
